<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Move Latency Test</title>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
          type='text/javascript'></script>

  <style>
    body {
      margin: 0;
    }
    canvas {
      border: 1px solid black;
      height: 2048px;
    }
  </style>
  <script>
    var prev_y = 0;

    function OnTouchStart(event) {
      event.preventDefault()

      var ctx = $('#canvas')[0].getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      var touch = event.changedTouches[0];
      prev_x = touch.clientX;
      prev_y = touch.clientY;
    }

    function OnTouchMove(event) {
      event.preventDefault();

      var canvas = $('#canvas')[0]
      var ctx = canvas.getContext('2d');
      var touch = event.changedTouches[0];

      center_x = canvas.clientWidth / 2;

      ctx.strokeStyle = 'black';
      ctx.lineWidth = 60;
      ctx.lineCap = 'butt'

      delta_y = touch.clientY - prev_y
      ctx.beginPath();
      ctx.moveTo(center_x, prev_y - delta_y);
      ctx.lineTo(center_x, touch.clientY);
      ctx.stroke();

      prev_y = touch.clientY;
    }

    window.onload = function() {
      document.getElementById('canvas').width = document.body.clientWidth;
      document.getElementById('canvas').height = document.body.clientHeight;
    };
  </script>
</head>

<body>
  <canvas id='canvas' ontouchstart='OnTouchStart(event)' ontouchmove='OnTouchMove(event)'>
  </canvas>
</body>

</html>
